import { App, Button } from 'antd';
import { useMemo, useRef, useState } from 'react';
import type {
  ActionRefType,
  YmEditTableColumnType,
  YmEditTableProps,
} from 'ym-design';
import { YmEditTable } from 'ym-design';

type RecordType = {
  editRowKey?: number;
  name?: string;
  age?: number;
  birthDay?: any;
  favorite?: string[];
};

function BasicEditTable() {
  const { message } = App.useApp();
  const editTableRef = useRef<ActionRefType<RecordType>>(null);
  const [values, setValues] = useState<RecordType[]>([
    {
      name: 'zyj1',
      age: 30,
      favorite: ['code'],
    },
  ]);
  const columns = useMemo<YmEditTableColumnType<RecordType>[]>(
    () => [
      {
        title: '用户信息',
        children: [
          {
            key: 'name',
            dataIndex: 'name',
            title: '姓名',
            editable: true,
            valueType: {
              type: 'input',
              inputProps: {
                placeholder: '请输入',
                autoComplete: 'off',
              },
            },
            formItemProps: {
              rules: [
                { required: true, message: '请输入姓名' },
                {
                  min: 2,
                  max: 6,
                  whitespace: true,
                  message: '请输入2-6个中文字符',
                },
              ],
            },
          },
          {
            key: 'age',
            dataIndex: 'age',
            title: '年龄',
            editable: true,
            valueType: {
              type: 'inputNumber',
              inputNumberProps: {
                placeholder: '请输入年龄',
                autoComplete: 'off',
              },
            },
            formItemProps: {
              rules: [
                { required: true, message: '请输入年龄' },
                {
                  min: 10,
                  max: 60,
                  type: 'number',
                  message: '请输入10-60之间的数字',
                },
              ],
            },
          },
          {
            key: 'birthDay',
            dataIndex: 'birthDay',
            title: '生日',
            editable: true,
            valueType: {
              type: 'date',
              datePickerProps: {
                placeholder: '请选择',
              },
            },
            formItemProps: {
              rules: [{ required: true, message: '请选择生日' }],
            },
          },
        ],
      },
      {
        key: 'favorite',
        dataIndex: 'favorite',
        title: '兴趣爱好',
        editable: true,
        width: 150,
        valueType: {
          type: 'select',
          selectProps: {
            options: [
              { label: '敲代码', value: 'code' },
              { label: '健身', value: 'sports' },
              { label: '做饭', value: 'cooking' },
              { label: '乒乓球', value: 'pingpongball' },
            ],
            style: {
              minWidth: 100,
            },
          },
        },
        formItemProps: {
          rules: [{ required: true, message: '请选择兴趣爱好' }],
        },
      },
      {
        key: 'operation',
        dataIndex: 'operation',
        title: '操作',
      },
    ],
    [],
  );

  const ymEditTableConfig: YmEditTableProps = {
    value: values,
    onRowValuesChange(rowIndex, newRecord) {
      console.log(
        '--onRowValuesChange--rowIndex--newRecord--:',
        rowIndex,
        newRecord,
      );
    },
    onChange(newValues) {
      console.log('--onChange--newValues--:', newValues);
      setValues(newValues);
    },
    columns,
  };

  //提交
  const handleSub = () => {
    editTableRef.current
      ?.handleValidate()
      .then((values) => {
        console.log('--values--:', values);
      })
      .catch((errors) => {
        console.log('--errors--:', errors);
      });
  };

  //重置
  const handleReset = () => {
    editTableRef.current?.handleReset();
  };

  const handleSetRowsData = () => {
    const currRowData = values[0];
    if (!currRowData) return message.error('请先添加第一行数据');
    if (
      currRowData &&
      (currRowData.editRowKey === undefined || currRowData.editRowKey === null)
    )
      return message.error('数据有误');
    currRowData.name = '11111';
    editTableRef.current?.setRowsData(currRowData);
  };

  return (
    <div>
      <p>
        <Button onClick={handleSub}>提交</Button>
        <Button onClick={handleReset}>重置</Button>
        <Button onClick={handleSetRowsData}>设置第一行数据</Button>
      </p>
      <YmEditTable {...ymEditTableConfig} ref={editTableRef} />
    </div>
  );
}

export default BasicEditTable;
